<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">库存记录</text>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">
			<!-- 类型筛选 -->
			<view class="filter-group">
				<text class="filter-label">操作类型</text>
				<view class="filter-row">
					<button class="filter-btn" :class="{ active: filter.type === 1 }" @click="setFilterType(1)">
						<text>入库</text>
					</button>
					<button class="filter-btn" :class="{ active: filter.type === 2 }" @click="setFilterType(2)">
						<text>出库</text>
					</button>
					<button class="filter-btn" :class="{ active: !filter.type }" @click="setFilterType(null)">
						<text>全部</text>
					</button>
				</view>
			</view>

			<!-- 日期筛选 -->
			<view class="filter-group">
				<text class="filter-label">时间范围</text>
				<view class="date-range">
					<view class="date-picker">
						<picker mode="date" :value="filter.startDate" @change="onStartDateChange">
							<view class="date-input">
								<text class="date-text">{{ filter.startDate || '开始日期' }}</text>
							</view>
						</picker>
					</view>
					<text class="date-separator">至</text>
					<view class="date-picker">
						<picker mode="date" :value="filter.endDate" @change="onEndDateChange">
							<view class="date-input">
								<text class="date-text">{{ filter.endDate || '结束日期' }}</text>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading && recordList.length === 0" class="loading-state">
			<text class="loading-text">正在加载...</text>
		</view>

		<!-- 空状态 -->
		<view v-else-if="recordList.length === 0" class="empty-state">
			<image src="/static/avatar/empty.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无库存记录</text>
		</view>

		<!-- 记录列表 -->
		<view v-else class="records-container">
			<view class="record-list">
				<view class="record-item" v-for="(record, index) in recordList" :key="index">
					<!-- 记录头部 -->
					<view class="record-header">
						<view class="header-main">
							<text class="record-title">{{ record.goods_name || '物品' }}</text>
							<view class="record-tag" :class="record.type === 1 ? 'in' : 'out'">
								{{ record.type === 1 ? '入库' : '出库' }}
							</view>
						</view>
					</view>

					<!-- 记录详情 -->
					<view class="record-details">
						<!-- 物品信息网格 -->
						<view class="detail-grid">
							<view class="detail-item" v-if="record.goods_category_name">
								<text class="detail-label">分类</text>
								<text class="detail-value">{{ record.goods_category_name }}</text>
							</view>
							<view class="detail-item" v-if="record.goods_brand">
								<text class="detail-label">品牌</text>
								<text class="detail-value">{{ record.goods_brand }}</text>
							</view>
							<view class="detail-item" v-if="record.goods_model">
								<text class="detail-label">型号</text>
								<text class="detail-value">{{ record.goods_model }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">变动数量</text>
								<text class="detail-value" :class="record.type === 1 ? 'positive' : 'negative'">
									{{ record.type === 1 ? '+' : '-' }}{{ Math.abs(record.change_count) }}
								</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">库存变化</text>
								<text class="detail-value">{{ record.before_count }} → {{ record.after_count }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">操作人</text>
								<text class="detail-value operator">{{ record.operator_name }}</text>
							</view>
							<view class="detail-item" v-if="record.reason">
								<text class="detail-label">原因</text>
								<text class="detail-value reason">{{ record.reason }}</text>
							</view>
						</view>
						
						<!-- 时间信息 -->
						<view class="record-time">
							<text class="time-text">{{ formatDateTime(record.create_date) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多提示 -->
		<view class="load-more-container">
			<view class="load-more-text" v-if="loadStatus === 'noMore'">没有更多数据了</view>
			<view class="load-more-text" v-else-if="loadStatus === 'loading'">正在加载...</view>
			<view class="load-more-text" v-else>上拉加载更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				filter: {
					type: null, // 1: 入库, 2: 出库, null: 全部
					startDate: '',
					endDate: ''
				},
				loadStatus: 'more',
				currentPage: 1,
				pageSize: 10,
				loading: false,
				total: 0,
			}
		},
		onLoad() {
			this.initData();
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			async initData() {
				this.currentPage = 1;
				await this.fetchRecords();
			},
			async handleRefresh() {
				await this.initData();
				uni.stopPullDownRefresh();
			},
			async loadMore() {
				if (this.loadStatus === 'noMore' || this.loading) return;
				
				this.currentPage++;
				await this.fetchRecords(true);
			},
			async fetchRecords(isLoadMore = false) {
				this.loading = true;
				try {
					const params = {
						...this.filter,
						pageNum: this.currentPage,
						pageSize: this.pageSize
					};
	
					const obj = uniCloud.importObject('goods');
					const res = await obj.getInventoryRecords(params);
	
					if (res.code === 0) {
						if (isLoadMore) {
							this.recordList = [...this.recordList, ...res.data];
						} else {
							this.recordList = res.data;
						}
						this.total = res.total;
	
						// 更新加载状态
						this.loadStatus = this.recordList.length >= this.total ? 'noMore' : 'more';
					} else {
						uni.showToast({
							title: res.message || '获取记录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取库存记录失败:', error);
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			setFilterType(type) {
				this.filter.type = type;
				this.initData();
			},
			onStartDateChange(e) {
				this.filter.startDate = e.detail.value;
				this.initData();
			},
			onEndDateChange(e) {
				this.filter.endDate = e.detail.value;
				this.initData();
			},
			getTypeText(type) {
				return type === 1 ? '入库' : '出库';
			},
			getTypeColor(type) {
				return type === 1 ? 'success' : 'error';
			},
			formatDateTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0 0 20rpx 0;
	}

	/* 页面标题 */
	.page-header {
		background-color: #007aff;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;

		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
		}
	}

	/* 筛选区域 */
	.filter-section {
		background: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.filter-group {
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.filter-label {
			display: block;
			font-size: 26rpx;
			color: #666;
			margin-bottom: 15rpx;
			font-weight: 500;
		}
	}

	/* 类型筛选按钮 - 高度缩小到60% */
	.filter-row {
		display: flex;
		gap: 15rpx;

		.filter-btn {
			flex: 1;
			padding: 12rpx 0; /* 缩小高度 */
			border-radius: 12rpx;
			background: #f8f9fa;
			color: #666;
			border: 1rpx solid #e9ecef;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;

			&.active {
				background: #007aff;
				color: #fff;
				border-color: #007aff;
			}

			&::after {
				border: none;
			}
		}
	}

	/* 日期筛选 - 左右排列 */
	.date-range {
		display: flex;
		align-items: center;
		gap: 15rpx;

		.date-picker {
			flex: 1;
		}

		.date-input {
			padding: 12rpx 15rpx; /* 减小padding */
			border: 1rpx solid #e9ecef;
			border-radius: 12rpx;
			background: #fafbfc;

			.date-text {
				font-size: 24rpx; /* 减小字体大小 */
				color: #555;
				text-align: center;
			}
		}

		.date-separator {
			color: #999;
			font-size: 24rpx;
			margin: 0 10rpx;
		}
	}

	/* 加载状态 */
	.loading-state {
		text-align: center;
		padding: 80rpx 40rpx;

		.loading-text {
			font-size: 28rpx;
			color: #888;
		}
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			opacity: 0.6;
			margin-bottom: 20rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #888;
		}
	}

	/* 记录列表 */
	.records-container {
		margin: 0 20rpx;
	}

	.record-list {
		.record-item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			border: 1rpx solid #f0f0f0;
			overflow: hidden;

			/* 记录头部 */
			.record-header {
				padding: 15rpx 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				background-color: #007aff;

				.header-main {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.record-title {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						flex: 1;
						margin-right: 15rpx;
					}

					.record-tag {
						padding: 4rpx 12rpx;
						border-radius: 8rpx;
						font-size: 30rpx;
						font-weight: 500;

						&.in {
							background-color: #e8f5e9;
							color: #18bc37;
						}

						&.out {
							background-color: #ffebee;
							color: #dd524d;
						}
					}
				}
			}

			/* 记录详情 */
			.record-details {
				padding: 15rpx 20rpx;

				/* 网格布局 */
				.detail-grid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 10rpx 15rpx;
					margin-bottom: 12rpx;

					.detail-item {
						display: flex;
						flex-direction: column;

						.detail-label {
							font-size: 30rpx;
							color: #999;
							margin-bottom: 4rpx;
						}

						.detail-value {
							font-size: 32rpx;
							color: #555;
							font-weight: 500;

							&.positive {
								color: #18bc37;
							}

							&.negative {
								color: #dd524d;
							}

							&.operator {
								color: #007aff;
							}

							&.reason {
								color: #dd524d;
							}
						}
					}
				}

				/* 时间信息 */
				.record-time {
					padding-top: 10rpx;
					border-top: 1rpx dashed #f0f0f0;

					.time-text {
						font-size: 20rpx;
						color: #999;
						text-align: right;
					}
				}
			}
		}
	}

	/* 加载更多 */
	.load-more-container {
		padding: 20rpx 0;
		text-align: center;

		.load-more-text {
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 响应式优化 */
	@media screen and (max-width: 768px) {
		.filter-section {
			margin: 0 15rpx 15rpx;
			padding: 15rpx;
		}

		.date-range {
			flex-direction: column;
			gap: 10rpx;

			.date-separator {
				display: none;
			}
		}

		.record-list .record-item {
			margin-bottom: 15rpx;

			.record-header {
				padding: 12rpx 15rpx;
			}

			.record-details {
				padding: 12rpx 15rpx;

				.detail-grid {
					gap: 8rpx 12rpx;

					.detail-item {
						.detail-label {
							font-size: 28rpx;
						}

						.detail-value {
							font-size: 30rpx;
						}
					}
				}
			}
		}
		
		/* 保持按钮高度缩小 */
		.filter-row .filter-btn {
			padding: 12rpx 0;
		}
		
		.date-input {
			padding: 12rpx 15rpx;
		}
		
		.date-text {
			font-size: 32rpx;
		}
	}
</style>